<template>
	<navbar-bg text="资讯" :isback="true">
		<template v-slot class="padding-lr-com">
			<image src="https://api.anred.qrsk.net/applet/profile/image/message/bg.png" class="border-radius-sm" style="width: 100%; height: 390rpx;"></image>
		</template>
	</navbar-bg>

	<view class="text-df padding-lr-com" style="">
		<zb-tab v-if="type.show" :scrollable="true" :shrink="true" lineColor="#EE3F4D" :lineWidth="20" :activeStyle="{
		    fontWeight: 'bold',
		    transform: 'scale(1.2)',
			color:'#EE3F4D'
		    }" :data="type.list" v-model="type.current" @change="change_tab"></zb-tab>

		<view v-for="(item, index) in writer" :key="index" class="margin-top-sm " @click="toWriter_detail(item.id)">
			<view v-if="item.indexImg.slice(0,1)!=='/'">
				<view class="text-overhidden-1 text-bold text-lg">{{item.artName}}</view>
				<view class="text-sm text-mid text-overhidden-2 margin-top-xs">{{item.articleAbstract}}</view>
				<view class="text-sm margin-top-xs text-low" style="text-align: right;">{{item.createTime}}</view>
				<view style="width: 100%; border: 1px solid #f7f7f7;" class="margin-tb-xs"></view>
			</view>

			<view v-else>
				<view class="flex-row">
					<image :src="imgURL+item.indexImg" style="width: 280rpx; height: 150rpx;" mode="aspectFill"
						class="border-radius-sm">
					</image>
					<view class="margin-left-xs"
						style="width: 430rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view class="text-overhidden-2 text-bold text-lg">{{item.artName}}</view>
						<view class="text-sm text-low" style="text-align: right;">{{item.createTime}}</view>
					</view>
				</view>
				<view class="text-sm text-mid text-overhidden-2 margin-top-xs">{{item.articleAbstract}}</view>
				<view style="width: 100%; border: 1px solid #f7f7f7;" class="margin-tb-sm"></view>
			</view>
		</view>

		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>

	</view>

	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onReachBottom, onLoad } from "@dcloudio/uni-app"
	import { getArticle, getCategory } from '../../api/zixun/zixun';
	import { imgURL } from '../../api/request';

	const writer = ref([])

	//跳转文章详情
	const toWriter_detail = (id : string) => {
		console.log('跳转前' + id)
		uni.navigateTo({
			url: '/pages/message/detail?id=' + id
		})
	}

	const type = reactive({
		current: 0,
		show: false,
		list: []
	})

	const article_param = reactive({
		categoryId: '1',
		current: 1,
		size: 6
	})

	onLoad(() => {
		// 获取资讯分类
		get_tab()
		//获取文章
		get_article()
	})

	//触底刷新
	onReachBottom(() => {
		article_param.current++
		getArticle(article_param).then((res : any) => {
			for (let i = 0; i < res.data.list.length; i++) {
				writer.value.push(res.data.list[i])
			}
		})
	})

	// 获取资讯分类
	const get_tab = () => {
		getCategory().then((res : any) => {
			for (let i = 0; i < res.data.length; i++) {
				type.list.push({
					name: res.data[i].cateName,
					value: res.data[i].id
				})
			}
			type.current = type.list[0].value
			article_param.categoryId = type.list[0].value
			type.show = true
		})
	}

	//获取文章
	const get_article = () => {
		getArticle(article_param).then((res : any) => {
			writer.value = JSON.parse(JSON.stringify(res.data.list))
		})
	}

	// tab切换
	const change_tab = (item : { value : string; }) => {
		article_param.categoryId = item.value
		article_param.current = 1
		getArticle(article_param).then((res : any) => {
			writer.value = JSON.parse(JSON.stringify(res.data.list))
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>